<template>
    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
        style="width: 100%;height: 100%" stripe :header-cell-style="tableStyle.headerCellStyle"
        @sort-change="sortChangeHandle">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="id" label="Id" width="80" />
        <el-table-column prop="jobId" label="JobId" width="75" />
        <el-table-column prop="jobDetilid" label="JobDetilid" width="95" />
        <el-table-column prop="lotNumber" :label="$t('edijob.lotNumber')" width="70" />
        <el-table-column prop="barcode" :label="$t('edijob.barcode')" width="170" />
        <el-table-column prop="pcsQty" :label="$t('edijob.pcsQty')" width="90" />
        <el-table-column prop="materialCode" :label="$t('edijob.materialCode')" width="120" />
        <el-table-column prop="materialName" :label="$t('edijob.materialName')" width="250" />
        <el-table-column prop="materialSpec" :label="$t('edijob.materialSpec')" width="330" />
        <el-table-column prop="qty" :label="$t('edijob.qty')" width="170">
            <template #default="scope">
                <div class="editable-cell" @click="handleQtyClick(scope.row)">
                    <!-- 编辑模式 -->
                    <el-input-number
                        v-if="editingId === scope.row.id && state.queryForm.optCode === 'Modify' && state.queryForm.docCode === 'CompleteRpt' && state.queryForm.jobCode === 'CompleteReport'"
                        v-model="scope.row.qty" 
                        :ref="(el) => setQtyRef(el, scope.row.id)" 
                        @blur="handleBlur(scope.row)"
                        @change="handleChange(scope.row)" 
                        @keyup.enter="handleChange(scope.row)" 
                        style="width: 150px;"
                        :min="0" />
                    <!-- 显示模式 -->
                    <span v-else>{{ scope.row.qty }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="giftQty" :label="$t('edijob.giftQty')" width="85" />
        <el-table-column prop="unit" :label="$t('edijob.unit')" width="80" />
        <el-table-column prop="bomVersion" :label="$t('edijob.bomVersion')" width="145" />
        <el-table-column prop="sourceWarehouseCode" :label="$t('edijob.sourceWarehouseCode')" width="120" />
        <el-table-column prop="sourceLocationCode" :label="$t('edijob.sourceLocationCode')" width="120" />
        <el-table-column prop="targetWarehouseCode" :label="$t('edijob.targetWarehouseCode')" width="120" />
        <el-table-column prop="targetLocationCode" :label="$t('edijob.targetLocationCode')" width="120" />
        <el-table-column prop="erpdocnoLine" :label="$t('edijob.erpdocnoLine')" width="120" />
        <el-table-column prop="erpdocNo" :label="$t('edijob.erpdocNo')" width="150" />
        <el-table-column prop="docNo" :label="$t('edijob.docNo')" width="140" />
        <el-table-column prop="pathLossQty" :label="$t('edijob.pathLossQty')" width="85" />
        <el-table-column prop="sourceNo" :label="$t('edijob.sourceNo')" width="170" />
        <el-table-column prop="sourceLine" :label="$t('edijob.sourceLine')" width="100" />
        <el-table-column prop="brand" :label="$t('edijob.brand')" width="170" />
        <el-table-column prop="deptCode" :label="$t('edijob.deptCode')" width="100" />
        <el-table-column prop="batchNumber" :label="$t('edijob.batchNumber')" width="80" />
        <el-table-column prop="k3SrcId" :label="$t('edijob.k3SrcId')" width="100" />
        <el-table-column prop="completeDocDirection" :label="$t('edijob.completeDocDirection')" width="150" />
        <el-table-column prop="batchNo" :label="$t('edijob.batchNo')" width="160" />
        <el-table-column prop="outputNo" :label="$t('edijob.outputNo')" width="340" />
        <el-table-column prop="returnableQty" :label="$t('edijob.returnableQty')" width="85" />
        <el-table-column prop="costItem" :label="$t('edijob.costItem')" width="90" />
        <el-table-column prop="returnType" :label="$t('edijob.returnType')" width="90" />
        <el-table-column prop="productObject" :label="$t('edijob.productObject')" width="90" />
        <el-table-column prop="stockReturnType" :label="$t('edijob.stockReturnType')" width="90" />
        <el-table-column prop="sourceWarehouseCodeErp" :label="$t('edijob.sourceWarehouseCodeErp')" width="160" />
        <el-table-column prop="targetWarehouseCodeErp" :label="$t('edijob.targetWarehouseCodeErp')" width="160" />
        <el-table-column prop="produceId" :label="$t('edijob.produceId')" width="100" />
        <el-table-column prop="processCode" :label="$t('edijob.processCode')" width="120" />
        <el-table-column prop="processName" :label="$t('edijob.processName')" width="120" />
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</template>


<script setup lang="ts">
//  table hook
import { BasicTableProps, useTable } from "/@/hooks/table";
import { getJobdetailsrcByJobDetailId,updateJobReportQty } from "/@/api/platform/edi/job";
import { useI18n } from 'vue-i18n';
import { useMessage } from "/@/hooks/message";
const emits = defineEmits(['getChildren'])
const { t } = useI18n();

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getJobdetailsrcByJobDetailId
})

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

// 响应式状态
const editingId = ref(null)
const originalQty = ref('')
const qtyRefs = ref({})
// 设置日期选择器引用
const setQtyRef = (el, id) => {
  if (el) qtyRefs.value[id] = el
}
// 处理单元格点击
const handleQtyClick = async (row) => {
  if (state.queryForm.jobCode === 'CompleteReport' && state.queryForm.optCode === 'Modify' && state.queryForm.docCode === 'CompleteRpt' ){
    if (editingId.value !== null) return
    
    editingId.value = row.id
    originalQty.value = row.qty
    
    await nextTick()
    const picker = qtyRefs.value[row.id]
    picker?.focus()
  }
}
// 处理数量变更
const handleChange = async (row) => {
  // 添加防重复检查
  if (editingId.value === null) return
  
  editingId.value = null // 立即清除编辑状态
  if (row.qty !== originalQty.value) {
    await saveDate(row)
  }
}

// 处理失焦事件
const handleBlur = async (row) => {
  // 只有在仍处于编辑状态时处理
  if (editingId.value === row.id && row.qty !== originalQty.value) {
    await saveDate(row)
  }
  editingId.value = null
}

// 保存到接口
const saveDate = async (row) => {
  try {
    // 调用你的API接口
    await updateJobReportQty({
      jobDetailsrcId: row.id,
      jobId: row.jobId,
      jobDetailId: row.jobDetilid,
      qty: row.qty
    })
    useMessage().success('修改成功')
    emits('getChildren');
    getDataList()
  } catch (error) {
    // 回滚数据
    row.qty = originalQty.value
    useMessage().error(`修改失败`)
  }
}
// 刷新表格
const refresh = (row: any) => {
    state.queryForm.JobDetailid = row.id
    state.queryForm.optCode = row.optCode
    state.queryForm.docCode = row.docCode
    state.queryForm.jobCode = row.jobCode
    getDataList()
}

// 暴露变量
defineExpose({
    refresh
});

</script>

<style scoped>

</style>